<template>
  <el-row class="s1" v-loading.fullscreen.lock="loading">
    <el-row class="cm">
      <el-form inline>
        <el-form-item label="权限名称">
          <el-input v-model="search.permissionName" placeholder="权限名称"></el-input>
        </el-form-item>
        <el-form-item label="权限类型">
          <el-select clearable v-model="search.permissionType" placeholder="请选择类型">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">查询</el-button>
        </el-form-item>
      </el-form>
      <div style="float: right;background-color: #fafafa;margin-bottom: 15px;">
        <el-button type="success" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        <el-button type="warning" icon="el-icon-edit" @click="handleEdit">编辑</el-button>
        <el-popover placement="top" width="160" v-model="delVisible">
          <p>确定删除吗？</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="delVisible = false">取消</el-button>
            <el-button size="mini" type="danger" @click="handleDelete">确定</el-button>
          </div>
          <el-button style="margin-left: 10px" slot="reference" icon="el-icon-delete" type="danger">删除</el-button>
        </el-popover>
      </div>
      <el-table highlight-current-row :data="tableData" @selection-change="handleSelectionChange" ref="multipleTable" @row-click="handleCheckChange"
        stripe style="width: 100%">
        <el-table-column type="selection" width="50">
        </el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="permission" label="权限路径">
        </el-table-column>
        <el-table-column prop="permissionName" label="权限名称">
        </el-table-column>
        <el-table-column prop="parent" label="父级">
        </el-table-column>
        <el-table-column prop="type" label="类型">
        </el-table-column>
        <el-table-column prop="pstatus" label="状态">
        </el-table-column>
        <el-table-column prop="icon" label="图标">
        </el-table-column>
        <el-table-column prop="sort" label="排序">
        </el-table-column>
        <el-table-column prop="component" label="vue组件路径">
        </el-table-column>
        <el-table-column prop="pauthRequire" label="前端路由拦截">
        </el-table-column>
        <el-table-column prop="pisMenu" label="菜单是否渲染">
        </el-table-column>
      </el-table>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
    </el-row>

    <el-dialog :title="title" width="400px" :close-on-click-modal="false" :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="权限类型">
          <el-select clearable v-model="form.permissionType" @change="typeChange" placeholder="请选择类型">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限路径">
          <el-input v-model="form.permission"></el-input>
        </el-form-item>
        <el-form-item label="权限名称">
          <el-input v-model="form.permissionName"></el-input>
        </el-form-item>
        <el-form-item v-if="typeShow" label="父级">
          <el-select filterable clearable v-model="form.permissionParent" placeholder="请选择父级">
            <el-option v-for="item in permissions" :key="item.permissionId" :label="item.permissionName" :value="item.permissionId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="typeShow" label="图标">
          <el-input v-model="form.icon"></el-input>
        </el-form-item>
        <el-form-item v-if="typeShow" label="排序">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item v-if="typeShow" label="vue组件路径">
          <el-input v-model="form.component"></el-input>
        </el-form-item>
        <el-form-item v-if="typeShow" label="路由拦截">
          <el-select clearable v-model="form.authRequire" placeholder="请选择类型">
            <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="typeShow" label="渲染菜单">
          <el-select clearable v-model="form.isMenu" placeholder="请选择类型">
            <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
  import PermissionApi from 'services/permissionApi';

  import TablePagination from 'commonComponents/tablePagination';

  import Pagination from 'models/pagination';
  import PermissionListSearch from 'models/permission/permissionListSearch';

  export default {
    data() {
      return {
        loading: true,
        title: '编辑',
        pagination: new Pagination(),
        search: new PermissionListSearch(),
        tableData: [],
        delVisible: false,
        dialogVisible: false,
        form: {},
        roles: [],
        multipleSelection: [],
        types: [{
          id: 1,
          name: '菜单'
        }, {
          id: 2,
          name: '接口'
        }],
        status: [{
          id: 1,
          name: '是'
        }, {
          id: 0,
          name: '否'
        }],
        typeShow: true,
        permissions: []
      }
    },

    created() {
      //页面加载执行方法
      this.loading = true;
      Promise.all([
        this.setParentPermissions(),
        this.setTablePermissionList(false)
      ]).then(() => {
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    methods: {
      setParentPermissions() {
        return PermissionApi.getParentPermissions().then(permissions => {
          this.permissions = permissions;
          return permissions;
        });
      },

      setTablePermissionList(hasLoading = true) {
        if (hasLoading) {
          this.loading = true;
        }
        return PermissionApi.getAllPermission(this.search, this.pagination).then(tableData => {
          this.tableData = tableData;
          if (hasLoading) {
            this.loading = false;
          }
          return tableData;
        }).catch(() => {
          if (hasLoading) {
            this.loading = false;
          }
        });
      },

      typeChange(value) {
        if (value === 1) {
          this.typeShow = true;
        } else if (value === 2) {
          delete this.form.permissionParent;
          delete this.form.icon;
          delete this.form.sort;
          delete this.form.component;
          delete this.form.authRequire;
          delete this.form.isMenu;
          this.typeShow = false;
        }
      },

      pageChange() {
        this.setTablePermissionList();
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      handleCheckChange(row, event, column) {
        if (row) {
          this.$refs.multipleTable.toggleRowSelection(row);
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

      operateTips(type, sl) {
        if (sl === 0) {
          this.$message({
            message: '请选择一个条目',
            type: 'warning'
          });
        } else if (sl === 1) {
          return true;
        } else {
          if (type === 'edit') {
            this.$message({
              message: '只能选择一个条目',
              type: 'warning'
            });
          } else if (type === 'del') {
            return true;
          }
        }
        return false;
      },

      handleEdit() {
        this.title = '编辑';
        if (!this.operateTips('edit', this.multipleSelection.length)) {
          return;
        }
        let row = this.multipleSelection[0];
        this.form = Object.assign({}, row);
        this.dialogVisible = true;
      },

      handleDelete(index, row) {
        if (!this.operateTips('del', this.multipleSelection.length)) {
          return;
        }
        let rows = this.multipleSelection;
        let ids = _.map(rows, 'permissionId');
        this.loading = true;
        PermissionApi.delPermission(ids).then(msg => {
          this.$message(msg);
          this.setTablePermissionList();
          this.loading = false;
          this.delVisible = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      handleAdd() {
        this.title = '新增';
        this.form = {};
        this.dialogVisible = true;
      },

      saveUser() {
        this.loading = true;
        if (this.form.permissionId) {
          //更新
          PermissionApi.updatePermission(this.form).then(msg => {
            this.$message(msg);
            this.dialogVisible = false;
            this.loading = false;
            this.setTablePermissionList();
          }).catch(()=>{
            this.loading = false;
          });
        } else {
          //新增
          PermissionApi.addPermission(this.form).then(msg => {
            this.$message(msg);
            this.dialogVisible = false;
            this.loading = false;
            this.setTablePermissionList();
          }).catch(()=>{
            this.loading = false;
          });
        }
      },

      queryList() {
        this.pagination.currentPage = 1;
        this.setTablePermissionList();
      }
    },

    components: {
      TablePagination
    }
  }

</script>

<style lang="scss" scoped>
  .cm {
    width: 98%;
    margin-top: 15px;
    margin-left: 1%;
  }

  .s1 {
    width: 100%;
    height: 100%;
    background-color: #f1f3f4
  }

</style>
